<script setup>
import {ref, onMounted} from 'vue';
import {queryEnterprise, deleteById, exportExcel} from '@/api/platform/enterprise.jsx';
import SaveOrUpdate from './SaveOrUpdate.vue'
import {ElMessage, ElMessageBox} from "element-plus";
import host from '@/utils/env.js'
import Permissions from './Permissions.vue'
import Fund from './Fund.vue'
import Renewal from './Renewal.vue'
import {getUser} from '@/utils/session.js'
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "enterprise"
})
const tableData = ref([])
const page = ref(1);//默认第一页
const pageSize = ref(10);//每页显示条数
const total = ref(0);//总条数

/**
 * 分页
 * @param pg 第几页
 */
function chgpg(pg) {
  page.value = pg;
  initData();
}

/**
 * 分页
 * @param pgSize 每页多少条
 */
function chg(pgSize) {
  pageSize.value = pgSize;
  page.value = 1;
  initData();
}

//搜索
const input = ref([])
const filters = ref({
  name: "",
  status: ""
})
const statusOptions = [
  {
    value: '1',
    label: '未审核',
  },
  {
    value: '2',
    label: '已审核',
  }, {
    value: "3",
    label: "已拒绝"
  }]

function initData() {
  let data = {
    "page": page.value,
    "pageSize": pageSize.value,
    "name": filters.value.name,
    "status": filters.value.status
  }
  queryEnterprise(data)
    .then(res => {
      if (res.code == 200) {
        tableData.value = res.data.list
        page.value = res.data.page
        pageSize.value = res.data.pageSize
        total.value = res.data.total
      }
    })
}

//添加用户
const isshow = ref(false)

//删除企业
async function deleteEnt(row) {
  let data = {
    "id": row.id
  }
  ElMessageBox.confirm(
    '确认删除该企业信息吗，删除后该企业的所有数据将无法恢复！',
    '企业删除确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      let res = await deleteById(data)
      initData()
      if (res.code==200) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      }
    })
    .catch(() => {

    })
}

//导出
async function exportEnt() {
  let res = await exportExcel({})
  if (res.code == 200) {
    let url = host + res.data;
    window.open(url)
  }
}


//同名引用
const saveUpdate = ref(null)

//保存或修改
function saveOrUpdate(row) {
  isshow.value = true;
  saveUpdate.value.init(row)
}
const isshowPermi = ref(false)
//增加权限
const permi = ref(null)
function permissions(row){
  isshowPermi.value=true;
  permi.value.saveQx(row.id)
}
//资金
const isshowFund = ref(false)
const fundId = ref(null)
function fund(row){
  isshowFund.value=true
  fundId.value.fundXx(row.id)
}
//续费
const isshowRen = ref(false)
const queryId = ref(null)
function renewalAll(row){
  isshowRen.value=true
  queryId.value.queryById(row.id)
}
//获取用户信息
let user = {};
onMounted(() => {
  initData();
  user = getUser();
  console.log("user>>>",user)
})
</script>

<template>
  <div style="margin: 0;padding: 0">
    <!--  企业列表  -->
    <div
      style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
      <span style="font-size: 12px;margin-left: 20px;">筛选查询</span>
    </div>
    <div style="background-color: #FFFFFF"><br>
      <div style="margin-left: 40px;margin-top: -15px;height: 40px">
        企业搜索:
        <el-input v-model="filters.name" style="width: 240px" placeholder="输入您要查找的企业"/>
        <span style="margin-left: 80px">状态:</span>
        <div style="margin-left: 440px;margin-top: -32px">
          <el-select
            v-model="filters.status"
            clearable
            placeholder="请选择"
            style="width: 240px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button style="margin-left: 20px" @click="initData()">查询结果</el-button>
        </div>
      </div>
    </div>
    <div>
      <div
        style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
        <span style="font-size: 12px;margin-left: 20px">企业列表</span>

        <el-button style="background-color: #FFFFFF;float: right;margin-left: 20px;margin-right: 20px"
                   @click="saveOrUpdate()">添加用户
        </el-button>
        <el-button style="background-color: #FFFFFF;float: right" @click="exportEnt">导出</el-button>
      </div>
    </div>
    <!-- 数据列表 -->
    <el-table :data="tableData" style="width: 100%" border stripe>
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="code" label="企业id" width="100" header-align="center" align="center"/>
      <el-table-column prop="name" label="企业客户" width="180" header-align="center" align="center"/>
      <el-table-column prop="user" label="联系人" width="120" header-align="center" align="center"/>
      <el-table-column prop="mobile" label="手机号" width="160" header-align="center" align="center"/>
      <el-table-column prop="createTime" label="创建时间" width="180" header-align="center" align="center"/>
      <el-table-column prop="expireDate" label="到期时间" width="180" header-align="center" align="center"/>
      <el-table-column label="操作" header-align="center" align="center">
        <template v-slot="{row}">
          <span class="btn">进入</span>
          <span class="btn" @click="saveOrUpdate(row)">资料</span>
          <span class="btn" @click="permissions(row)">权限</span>
          <span class="btn" @click="fund(row)">资金</span>
          <span class="btn" @click="renewalAll(row)">续费</span>
          <span class="btn" @click="deleteEnt(row)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:40px auto; width: 500px;">
      <el-pagination background @current-change="chgpg" @size-change="chg" :page-size="pageSize"
                     :page-sizes="[10,20,30,40,50,100]" layout="total,sizes,prev, pager, next,jumper" :total="total"/>
    </div>

    <!--  添加或修改对话框  -->
    <SaveOrUpdate :visible="isshow" @close="isshow=false" @refresh="initData" ref="saveUpdate"></SaveOrUpdate>
    <Permissions :visible="isshowPermi" @close="isshowPermi=false" ref="permi"></Permissions>
    <Fund :visible="isshowFund" @close="isshowFund=false" ref="fundId"></Fund>
    <Renewal :visible="isshowRen" @close="isshowRen=false" ref="queryId"></Renewal>
  </div>

</template>

<style scoped lang="scss">
.btn {
  color: #3399FF;
  margin-left: 5px;
  cursor: pointer;
}
</style>
